<!--
  *@Description : 发现页面组件
  *@author 萧红
  *@date 2020-03-21 22:02
  *@LastEditTime 2020-03-21 22:02
  *@LastEdititors
-->
<template>
    <div id="find">
      <top :data="labelData" @sceneChange="sceneChange"></top>
      <bottom :select-index="1"></bottom>
      <div :style="{height:$inerHeight + 'px'}">
        <cube-scroll :data="data" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp" ref="scroll">
          <!--轮播图模块-->
          <template v-if="scene==='recommend'">
            <div class="recommend">
              <nav>
                <cube-slide ref="slide" :data="[]" @change="changePage" :showDots="true">
                  <cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)" class="slide-item">
                    <img :src="item.image">
                  </cube-slide-item>
                </cube-slide>
              </nav>
              <!--end-->
              <!--话题模块-->
              <div class="topic-area">
                <div>#穿cos给祖国庆生</div>
                <div>#袍子的第一件入坑cos服</div>
                <div>#cos小剧本征集</div>
                <div>#喜欢什么样的cos搭配</div>
              </div>
              <!--end-->
              <!--cos吧模块-->
              <div class="connection">
                <div class="title">推荐cos吧</div>
                <div class="cos">
                  <div class="cos-item" v-for="(item, index) in cosBaData" :key="index">
                    <div class="img">
                      <img :src="item.imgUrl" alt="">
                    </div>
                    <div class="text">{{item.text}}</div>
                    <div class="number">
                      <span>{{item.number}}</span>条动态
                    </div>
                  </div>
                </div>
              </div>
              <!--end-->
            </div>
          </template>
          <template v-if="scene==='photograph'">
            <div class="photograph">
              <div class="card" v-for="(cdata,index) in data" :key="index">
                <div class="img" :style="{backgroundImage:`url(${cdata.urls[0]})`}" @click="toNewPage({path:'/dongtaiDetail',query:{data:JSON.stringify(cdata)}})"></div>
                <div class="info">
                  <div class="avatar" :style="{backgroundImage:`url(${cdata.info.img})`}" @click.stop="toNewPage({path:'/userDetail', query:{userId:cdata.user_id}})"></div>
                  <div class="name">{{cdata.info.name}}</div>
                  <div class="redu">
                    <i class="iconfont iconrenqi"></i>
                    {{cdata.dianzan+cdata.pinglun+cdata.shoucang}}
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="scene==='video'">
            <div class="video-area">
              <div class="mode" v-for="(mData,mindex) in data" :key="mindex">
                <!--个人信息区域-->
                <Info :info="mData.info" :inGuanZhu="mData.inGuanZhu" @changeInGuanZhu="(state)=>mData.inGuanZhu=state" :under-name="'sign'" :show-guan-zhu-btn="1" :show-under-btn="0"></Info>
                <div class="video" @click="goDetail(mData)">
                  <!--<my-video :vedio-url="mData.urls[0]" :index="mData.videoIndex!==-1?mData.videoIndex:''" :poster="mData.urls[1]"></my-video>-->
                  <video src="mData.urls[0]" class="myVideo" style="display: none"></video>
                  <div class="video-img" :style="{backgroundImage:`url(${mData.urls[1]})`}">
                  </div>
                  <i class="el-icon-video-play"></i>
                </div>
                <div class="label">
                  <div v-for="label in mData.labels" :key="label">{{label}}</div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="scene=== 'article'">
            <div class="article">
              <div class="mode" v-for="(aData,index) in data" :key="index">
                <div @click="toNewPage({path:'/dongtaiDetail',query:{data: JSON.stringify(aData)}})">
                  <div class="fm-img" :style="{backgroundImage: `url(${aData.urls[0]})`}"></div>
                  <div class="title">{{aData.labels[0]}}</div>
                  <div class="introduction">{{aData.labels[1]}}</div>
                </div>
                <div class="info" @click="toNewPage({path:'/userDetail',query:{userId: aData.user_id}})">
                  <div class="avatar" :style="{backgroundImage: `url(${aData.info.img})`}"></div>
                  <div class="name">{{aData.info.name}}</div>
                  <div class="date">
                    <span class="el-icon-time"></span>
                    {{aData.info.time}}
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="scene=== 'topic'">
            <div class="topic">
              <div class="mode" v-for="(tdata,tindex) in data" :key="tindex">
                <div class="left">
                  <div class="title">{{tdata.title}}</div>
                  <div class="desc">{{tdata.desc}}</div>
                </div>
                <div class="right">
                  <div class="img" v-if="tdata.img!==''" :style="{backgroundImage: `url(${tdata.img})`}"></div>
                  <div class="no-img" v-else>
                    #
                  </div>
                </div>
              </div>
            </div>
          </template>
        </cube-scroll>
      </div>
    </div>
</template>

<script>
import top from '../../components/Top'
import bottom from '../../components/Bottom'
import {PullDownRefreshAndPullUpLoad} from '../../common/js/mixins'
import MyVideo from '../../components/MyVideo'
import Info from '../../components/Info'
export default {
  name: 'index',
  mixins: [PullDownRefreshAndPullUpLoad],
  components: {
    Info,
    MyVideo,
    top,
    bottom
  },
  data () {
    return {
      labelData: [
        {
          name: '推荐',
          scene: 'recommend'
        },
        {
          name: '摄影',
          scene: 'photograph'
        },
        {
          name: '视频',
          scene: 'video'
        },
        {
          name: '话题',
          scene: 'topic'
        },
        {
          name: '文章',
          scene: 'article'
        }],
      scene: 'recommend',
      data: [], // 保存发现数据
      // 轮播图和链接数据
      items: [
        {
          url: '/cosba',
          image: '../../static/icon-find/icon-lol.png'
        },
        {
          url: '/cosba',
          image: '../../static/icon-find/icon-jianxiaqingyuan.png'
        },
        {
          url: '/cosba',
          image: '../../static/icon-find/icon-tianyamingyuedao.png'
        }
      ],
      cosBaData: [{
        imgUrl: '../../static/icon-find/1.png',
        text: '冬至',
        number: '130'
      },
      {
        imgUrl: '../../static/icon-find/2.png',
        text: 'cos奇妙夜',
        number: '120'
      },
      {
        imgUrl: '../../static/icon-find/3.png',
        text: 'cos摄影',
        number: '225'
      },
      {
        imgUrl: '../../static/icon-find/4.png',
        text: 'cos安利',
        number: '542'
      },
      {
        imgUrl: '../../static/icon-find/5.png',
        text: 'cos研习',
        number: '1713'
      },
      {
        imgUrl: '../../static/icon-find/6.png',
        text: 'cos开箱',
        number: '258'
      },
      {
        imgUrl: '../../static/icon-find/7.png',
        text: '山寨鉴定',
        number: '1718'
      },
      {
        imgUrl: '../../static/icon-find/8.png',
        text: '发型妆容',
        number: '5520'
      },
      {
        imgUrl: '../../static/icon-find/9.png',
        text: 'cos设计',
        number: '800'
      },
      {
        imgUrl: '../../static/icon-find/10.png',
        text: 'cos舞',
        number: '1110'
      },
      {
        imgUrl: '../../static/icon-find/11.png',
        text: 'cos资讯',
        number: '123'
      }
      ]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    onPullingDown () {
      this.page = 1
      this.getData()
    },
    onPullingUp () {
      this.page++
      let params = {
        userId: localStorage.getItem('userId'),
        page: this.page,
        scene: this.scene
      }
      this.apis.getFindData(params).then(res => {
        if (res.code === 200) {
          if (res.data.length === 0) {
            this.$refs.scroll.forceUpdate()
          } else {
            if (this.scene === 'video') {
              res.data.forEach((item) => {
                if (item.type === 'video') {
                  item.videoIndex = this.index // 保存视频的index
                  this.index++
                } else {
                  item.videoIndex = -1
                }
              })
            }
            this.data = this.data.concat(res.data)
          }
        }
      })
      // 这里请求后端
    },
    getData () {
      let params = {
        userId: localStorage.getItem('userId'),
        page: this.page,
        scene: this.scene
      }
      this.apis.getFindData(params).then(res => {
        if (res.code === 200) {
          this.data = res.data
          this.index = 0
          if (this.scene === 'video') {
            this.data.forEach((item) => {
              if (item.type === 'video') {
                item.videoIndex = this.index // 保存视频的index
                this.index++
              } else {
                item.videoIndex = -1
              }
            })
          }
          this.$toast('加载中', 'loading', 500)
        } else {
          this.$toast(res.msg)
        }
      })
    },
    sceneChange (scene) {
      this.scene = scene
      this.data = []
      this.page = 1
      this.$toast('加载中', 'loading', 9900)
      this.getData()
    },
    goDetail (data) {
      event.stopImmediatePropagation() // 停止冒泡和阻止默认行为
      this.toNewPage({name: 'dongtaiDetail', query: {data: JSON.stringify(data)}})
    },
    changePage (current) {
      // console.log('当前轮播图序号为:' + current)
    },
    // 在轮播图上面单击调用的方法
    clickHandler (item, index) {
      console.log(item, index)
      this.toNewPage(item.url)
    }
  }
}
</script>

<style scoped lang="stylus">
  @import "../../../node_modules/stylus-px2rem"
#find
{
  img
  {
    width 100%
    height 100%
  }
  .recommend
  {
    .slide-item
    {
      width: 80%
      height 60px
      img
      {
        width 100%
        height 100%
      }
    }
    .topic-area
    {
      margin-top 5px
      display flex
      flex-flow row wrap
      justify-content space-around
      border-bottom 3px solid #f0f0f0
      div
      {
        width: 45%;
        line-height: 10px;
        padding: 2px 2px;
        margin: 2px 0px;
        background: #f0f0f0;
        border-radius 2px
      }
    }
    .connection
    {
      .title
      {
        text-align: left;
        line-height: 10px;
        padding: 5px 5px;
        font-size: 7px;
        font-weight: bolder;
      }
    }
    .cos
    {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      margin-bottom: 5px;
      .cos-item
      {
        width: 31%;
        height: 55px;
        background-color: #f0f0f0;
        display flex
        flex-flow column nowrap
        justify-content space-around
        align-items center
        margin: 0.1rem 0.1rem;
        .img
        {
          width 25px
          height 25px
          flex none
        }
        .number
        {
          color: #999
        }
      }
    }
  }
  .photograph
  {
    width 100%
    padding 3px 3%
    box-sizing border-box
    display flex
    flex-flow row wrap
    justify-content: flex-start
    .card
    {
      width 48%
      box-sizing border-box
      border-radius 2px
      border 1px solid #f0f0f0
      box-shadow  0px 0px 1px 1px #f0f0f0;
      overflow hidden
      margin-top:5px
      .img
      {
        width 100%;
        box-sizing border-box
        height 70px
        background-size cover
        background-repeat no-repeat
        background-position center
      }
      .info
      {
        width 100%;
        box-sizing border-box
        height 20px
        display flex
        flex-flow row nowrap
        align-items center
        padding 0px 3px
        .avatar
        {
          width 12px
          height: 12px
          border-radius 50%
          background-repeat no-repeat
          background-position center
          background-size cover
        }
        .name
        {
          width 50%
          height 20px
          text-align left
          line-height 20px
          padding 0px 5px
          box-sizing border-box
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
        }
        .redu
        {
          flex 1
          height: 20px
          line-height 20px
          position relative
          font-size: 8px
          color #999
          vertical-align baseline
          i
          {
            color: rgba(255, 0, 0, 0.89)
          }
        }
      }
    }
    .card:nth-child(2n+1){
      margin-right: 3%
    }
  }
  .video-area
  {
    .mode
    {
      padding 2px 2px;
      border-bottom 3px solid #f0f0f0
      .label
      {
        display flex
        flex-direction row
        justify-content flex-start
        padding 2px 1.3px;
        div
        {
          display inline
          margin 2px
          padding 0px 2px
          height 10px;
          line-height 10px;
          background #fff1f1;
          color:deeppink;
        }
      }
      .video
      {
        width 100%
        height 100px
        position relative
        i
        {
          font-size: 30px
          color: #f0f0f0
          position: absolute
          left: 50%
          top: 50%
          transform translate(-50%,-50%)
          z-index 2
        }
        .video-img
        {
          width 100%
          height 100px
          background-repeat no-repeat
          background-position center
          background-size cover
          position absolute
          z-index 0
          top: 0
        }
      }
    }
  }
  .article
  {
    width 100%
    .mode
    {
      width: 100%
      padding 3px 3px
      box-sizing border-box
      border-bottom: 6px solid #f0f0f0
      .fm-img
      {
        width 100%
        height 75px
        background-size cover
        background-position center
        background-repeat no-repeat
      }
      .title
      {
        width 100%
        height: 20px
        line-height: 20px
        font-size 8px
        letter-spacing 3px
        font-weight bolder
      }
      .introduction
      {
        width 100%;
        line-height 10px
        text-align left
        color #999
      }
      .info
      {
        width 100%
        padding 2px 3px
        display flex
        flex-flow row nowrap
        align-items center
        .avatar
        {
          width: 17px
          height: 17px
          border-radius 50%
          background-position center
          background-size cover
          background-repeat no-repeat
          margin-right:5px
        }
        .name
        {
          width 40%
          text-align left
        }
        .date
        {
          width 40%
          text-align right
          color #999
          span
          {
            font-size 6.2px
          }
        }
      }
    }
  }
  .topic
  {
    .mode
    {
      width 100%
      padding 5px 5px
      display flex
      flex-flow row nowrap
      align-items center
      text-align left
      box-sizing border-box
      border:1px solid #f0f0f0
      .left
      {
        width 60%
        .title
        {
          width 100%
          height 20px
          line-height 20px
          font-size 7px
          font-weight bolder
          color:black
        }
        .desc
        {
          width 100%
          line-height 20px
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
          color #999
        }
      }
      .right
      {
        width 40%
        height 40px
        position relative
        .img,.no-img
        {
          width 40px
          height 40px
          position absolute
          right: 0
          background-repeat no-repeat
          background-size cover
          background-position center
          border-radius 3px
        }
        .no-img
        {
          line-height 40px
          text-align center
          font-size: 35px
          font-style italic
          color snow
          background-color #ff74a3
        }
      }
    }
  }
}
</style>
